<template>
  <div class="edit-group" :style="{
      width:Math.round(item.cptWidth)+'px',
      height:Math.round(item.cptHeight)+'px',
      top:Math.round(item.cptY)+'px',
      left:Math.round(item.cptX)+'px',
      transform: 'rotate('+item.cptRotate+'deg)',
      zIndex: selected ? 1800 + (length - index - 1) : length-(index+1)
    }" >
    <div v-show="currentCptIndex === index" style="position: fixed;border-top: 1px dashed #2589ff;width: 100%;left:0"/><!--顶部辅助线-->
    <div v-show="currentCptIndex === index" style="position: fixed;border-right: 1px dashed #2589ff;height:100%;top:0"/><!--左侧辅助线-->
    <!-- 2021-12-28新增iframe组件，防止焦点聚焦在iframe内部，添加此蒙版 -->
    <div v-resize="'move'" class="groupMask" :style="selected ? {border:'1px solid #2589ff'}:{}"/>
    <div style="width: 100%;height: 100%; position: relative" >
      <!-- 2023-4-17对子组件控制缩放 -->
      <div :style="{
        transform: `scaleX(${item.scaleX}) scaleY(${item.scaleY})`,
         width: `${item.originWidth}px`,
         height: `${item.originHeight}px`,
         transformOrigin: '0px 0px'}"
      >
        <div v-for="(groupItem, gIndex) in item.groupList" :key="groupItem.id" :style="{
        position: 'absolute',
        width:Math.round(groupItem.cptWidth)+'px',
        height:Math.round(groupItem.cptHeight)+'px',
        top:Math.round(groupItem.cptY)+'px',
        left:Math.round(groupItem.cptX)+'px',
         transform: 'rotate('+ groupItem.cptRotate +'deg)',
         zIndex: item.groupList.length - gIndex - 1
      }">
          <component
              :is="groupItem.cptKey"
              :width="Math.round(groupItem.cptWidth)"
              :height="Math.round(groupItem.cptHeight)"
              :option="groupItem.cptOption"
              :value="groupItem.cptOption"
          >
          </component>
        </div>
      </div>
    </div>

    <div v-show="selected" style="top: 0;left: 0;cursor: se-resize;transform: translate(-50%, -50%)" class="resizeTag" v-resize="'lt'"  />
    <div v-show="selected" style="top: 0;left: 50%;cursor: s-resize;transform: translate(-50%, -50%)" class="resizeTag" v-resize="'t'"  />
    <div v-show="selected" style="top: 0;right: 0;cursor: ne-resize;transform: translate(50%, -50%)" class="resizeTag" v-resize="'rt'"  />
    <div v-show="selected" style="top: 50%;right: 0;cursor: w-resize;transform: translate(50%, -50%)" class="resizeTag" v-resize="'r'"  />
    <div v-show="selected" style="bottom: 0;right: 0;cursor: se-resize;transform: translate(50%, 50%)" class="resizeTag" v-resize="'rb'"  />
    <div v-show="selected" style="bottom: 0;left: 50%;cursor: s-resize;transform: translate(-50%, 50%)" class="resizeTag" v-resize="'b'"  />
    <div v-show="selected" style="bottom: 0;left: 0;cursor: ne-resize;transform: translate(-50%, 50%)" class="resizeTag" v-resize="'lb'"  />
    <div v-show="selected" style="top: 50%;left: 0;cursor: w-resize;transform: translate(-50%, -50%)" class="resizeTag" v-resize="'l'"  />
  </div>
</template>

<script>
import resize from '@/views/designer/directives/resize'

export default {
  name: 'edit-group',
  cnName: '分组',
  props: {
    item: Object, // 组件数据
    index: Number, // 下标位置
    length: Number,
    currentCptIndex: Number, // 当前单选选中index
    selected: Boolean // 选中的对象集合
  },
  data() {
    return {}
  },
  methods: {},
  directives: {
    resize
  }
}
</script>

<style lang="less" scoped>
.edit-group {
  position: absolute;

  .groupMask {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1801
  }

  &:hover {
    .shape-modal {
      border-width: 1px;
    }
  }

  .resizeTag{
    width: 8px;
    height: 8px;
    position: absolute;
    background-color: #B6BFCE;
    z-index: 2000;
    border-radius: 50%;
  }

}
</style>
